<template>
	<view class="content">
		<view class="interval"></view>
		<view class="item" v-for="item in 10">
			<view class="name">
				太古百货场地
				<view class="num">6.45km</view>
			</view>
			<view class="userName">联系人：王小平</view>
			<view class="address-phone">
				<view class="text">地址：北京天安门</view>
				<view class="icon">
					<image src="../../../static/personal/icon_address.png" mode="widthFix" />
					导航
				</view>
			</view>
			<view class="address-phone">
				<view class="text">电话：18564121478</view>

				<view class="icon">
					<image src="../../../static/personal/icon_phone.png" mode="widthFix" />
					拨打
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {};
	},
	methods: {
		
	}
};
</script>

<style lang="scss">
.content {
	min-height: 100%;
	background: #f8f9f9;
	padding-bottom: 1rpx;
}
.interval {
	height: $base-interval;
}
.item {
	background-color: $bg-color-white;
	padding: $base-interval;
	margin-bottom: $sm-interval;
	border-radius: $border-radius-base;box-shadow: 0px 0px 12rpx 4rpx rgba(186, 196, 207, 0.22);

	.name {
		color: $text-color-black;
		font-weight: 600;
		font-size: $font-size-lg;
		@extend .flex-space-between-center;
		.num {
			color: $text-color-nine;
			font-size: $font-size-sm;
			font-weight: 400;
		}
	}
	.userName {
		font-size: $font-size-sm;
		color: $text-color-nine;
		padding: $sm-interval 0px ;
	}
	.address-phone {
		@extend .flex-space-between-center;
		color: $text-color-six;
		padding-bottom: $sm-interval;
		border-bottom: 1rpx solid #E8E8E8;
		.icon {
			@extend .flex-space-between-center;
			color: $text-color-three;
			
			image {
				width: 32rpx;
				margin-right: 10rpx;
			}
		}
		&:last-child{
			padding-top: $sm-interval;
			padding-bottom: 0px;border-bottom:0rpx solid #E8E8E8;
		}
	}
}
</style>
